<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>诗人作品</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app">
        <header>
            <div class="nav">
                <div 
                    v-for="(item,index) in times" 
                    :key="index" 
                    :class="time_active==index?'nav_item nav_item_active':'nav_item'" 
                    @click="changeTime(item,index)"
                    
                >
                    {{item}}
                </div>
            </div>
        </header>
        <main>
            <div class="middle-box">
                <div 
                    v-for="(item,index) in currentPoets" 
                    class="poet_item"
                    :key="index" 
                    @click="changePoet(item)"
                >
                    <div class="poet_img">
                        <img :src="item.profile" alt="" class="img">
                    </div>
                    <div class="poet_name">
                        {{item.name}}
                    </div>
                </div>
            </div>
        </main>
        <div class="content" v-if="selected_poet">
            <div class="box">
                <p>
                    <span class="name">{{this.selected_poet.name}}</span>
                    <span class="title">{{this.selected_poet.title}}</span>
                </p>
                <span class="dynasty">{{this.selected_poet.dynasty}}诗人</span>
                <p class="info">{{this.selected_poet.info}}</p>
            </div>
        </div>
    </div>
</body>


<script>
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        times:['初唐','中唐','盛唐','晚唐'],
        selected_poet:null,
        time_active:null,
        poets:[
            {"id":1,"name":"李白","profile":"images/01.jpg","dynasty":"盛唐","credit":120,"master":"《静夜思》、《蜀道难》、《将进酒》《梦游天姥吟留别》、《行路难》","title":"诗仙","info":"李白，字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。北京大学教授李志敏评价：“李白之诗呼吸宇宙，出乎道；杜甫之诗德参天地，源于儒，皆至天人合一境界，故能出神入化。”"},
            {"id":2,"name":"杜甫","profile":"images/02.jpg","dynasty":"盛唐","credit":90,"master":"《登高》《春望》《北征》《三吏》《三别》","title":"诗圣","info":"杜甫，字子美，自号少陵野老，唐代著名现实主义诗人，与李白合称“李杜”。出生于河南巩县，原籍湖北襄阳。"},
            {"id":3,"name":"李贺","profile":"images/03.jpg","dynasty":"中唐","credit":90,"master":"《高轩过》《梦天》《雁门太守行》《致酒行》《李凭箜篌引》","title":"诗鬼","info":"李贺（790～816） [1]  ，字长吉。河南府福昌县昌谷乡（今河南省宜阳县）人， 祖籍陇西郡。  唐朝中期浪漫主义诗人"},
            {"id":4,"name":"贺知章","profile":"images/04.jpg","dynasty":"盛唐","credit":100,"master":"《回乡偶书》(其一)、《咏柳》 《送人之军》 《唐禅社首乐章·太和》","title":"四明狂客","info":"贺知章，字季真，晚年自号“四明狂客”、“秘书外监”，越州永兴（今浙江杭州萧山区）人。唐代诗人、书法家。"},
            {"id":5,"name":"王昌龄","profile":"images/05.jpg","dynasty":"盛唐","credit":110,"master":"《出塞》《从军行七首》《芙蓉楼送辛渐》《长信宫词》","title":"七绝圣手","info":"王昌龄，字少伯，唐朝时期大臣，著名边塞诗人。"},
            {"id":6,"name":"刘禹锡","profile":"images/06.jpeg","dynasty":"中唐","credit":70,"master":"《乌衣巷》、《秋词》、《竹枝》(六)、《浪淘沙》(一)","title":"诗豪","info":"刘禹锡，字梦得，籍贯河南洛阳，生于河南郑州荥阳，自述“家本荥上，籍占洛阳” ，其先祖为中山靖王刘胜 [1-2]  （一说是匈奴后裔） [3]  。唐朝时期大臣、文学家、哲学家，有“诗豪”之称。"},
            {"id":7,"name":"王勃","profile":"images/07.jpeg","dynasty":"初唐","credit":90,"master":"《送杜少府之任蜀州》《滕王阁》","title":"初唐四杰","info":"王勃，字子安，绛州龙门县（今山西省河津市）人。唐朝文学家，文中子王通之孙，与杨炯、卢照邻、骆宾王共称“初唐四杰”。"},
            {"id":8,"name":"杨炯","profile":"images/08.jpg","dynasty":"初唐","credit":95,"master":"《从军行》、《出塞》、《战城南》、《紫骝马》","title":"初唐四杰","info":"杨炯，字令明，华州华阴（今陕西华阴市）人。唐朝大臣、文学家，常山郡公杨初曾孙，与王勃、卢照邻、骆宾王并称“初唐四杰”。"},
            {"id":9,"name":"骆宾王","profile":"images/09.jpg","dynasty":"初唐","credit":105,"master":"咏鹅、咏蝉 / 在狱咏蝉、于易水送人 / 于易水送别","title":"初唐四杰","info":"骆宾王  ，字观光，婺州义乌（今属浙江）人。唐代大臣、诗人、儒客大家，与王勃、杨炯、卢照邻合称“初唐四杰”。"},
            {"id":10,"name":"卢照邻","profile":"images/10.jpg","dynasty":"初唐","credit":102,"master":"《长安古意》、《释疾文并序》、《咏史》","title":"初唐四杰","info":"卢照邻，字升之，号幽忧子，幽州范阳（今河北涿州）人，唐朝诗人。"},
            {"id":11,"name":"陈子昂","profile":"images/11.jpg","dynasty":"初唐","credit":101,"master":"《登幽州台歌》、《登泽州城北楼宴》、《感遇》","title":"初唐四杰","info":"陈子昂 ，字伯玉，梓州射洪（今属四川）人。唐代文学家、诗人，初唐诗文革新人物之一。因曾任右拾遗，后世称陈拾遗。"},
            {"id":12,"name":"王维","profile":"images/12.jpg","dynasty":"盛唐","credit":101,"master":"《终南别业》《使至塞上》《送元二使安西》《九月九日忆山东兄弟》","title":"初唐四杰","info":"王维，字摩诘，号摩诘居士。河东蒲州（今山西永济）人，祖籍山西祁县。唐朝诗人、画家。"},
            {"id":13,"name":"李商隐","profile":"images/13.jpg","dynasty":"晚唐","credit":101,"master":"无题、楚宫、马嵬二首、残花","title":"诗魂","info":"李商隐，字义山，号玉谿生，怀州河内（今河南省沁阳市）人 [1]  。晚唐著名诗人，和杜牧合称“小李杜”。"}
        ],
        currentPoets:[]
    },
    methods:{
        // 更改朝代
        changeTime(poet,index){
            this.time_active=index
            this.currentPoets=this.poets.filter(item=>item.dynasty===poet)  
            this.selected_poet=null
        },
        // 切换诗人
        changePoet(item){
            this.selected_poet=item
        }
    },
    created(){
        this.poets=eval(this.poets)
        this.currentPoets=[].concat(this.poets)
    }
})
</script>
</html>